import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Query } from 'react-apollo'
import AddDataset from 'graphql/project/dataset/addDataset.graphql'
import QueryOrgDataset from 'graphql/project/dataset/queryOrgDataset.graphql'
import QueryProjectDataset from 'graphql/project/dataset/queryProjectDataset.graphql'
import { Header, Image } from 'semantic-ui-react'
import Icons from 'utils/constents/icons'
import {
  Form as FormTable,
  Section as TableSection,
  Submit,
  SearchInput,
} from 'components/tableForm'
import { global as globalDuck } from 'ducks'

const getVariables = (values) => {
  const result = {}
  if (values.name) result.datasetId = values.name.value.id
  return result
}

const getOptions = (addedUsersData) => {
  const reducedMember = addedUsersData.project_dataset.map(member => member.dataset_id)
  return queryUsersData => queryUsersData.dataset.reduce((pre, next) => {
    const isAdded = reducedMember.includes(next.id) > 0
    pre.push({
      disabled: isAdded,
      text: next.name,
      value: next,
      content: (
        <Header as="h5" style={{ marginTop: '0' }}>
          <Image src={Icons.DATASET} />
          <Header.Content>{next.name}</Header.Content>
        </Header>
      ),
      description: isAdded ? '已经添加' : '',
      icon: isAdded
        ? null
        : {
          name: 'add',
          className: 'right floated',
          color: 'green',
        },
    })
    return pre
  }, [])
}

class newDataset extends Component {
  componentDidMount = () => {}

  render() {
    const { project } = this.props
    const { projectId, orgId } = project
    const returnUrl = `/project/${project.orgName}/${project.projectName}/dataset`
    return (
      <Query query={QueryProjectDataset} variables={{ projectId }}>
        {({ loading, error, data }) => {
          if (loading) return 'Loading....'
          if (error) return `Error! ${error.message}`
          return (
            <FormTable>
              <TableSection header="添加数据集">
                <SearchInput
                  name="name"
                  header="搜索数据集"
                  description="请输入数据集名称"
                  query={{
                    query: QueryOrgDataset,
                    variables: { ownerId: orgId },
                    getData: getOptions(data),
                  }}
                />
              </TableSection>
              <Submit
                submit={{
                  text: '添加',
                  variables: { projectId },
                  getVariables,
                  mutation: AddDataset,
                  success: data => returnUrl,
                }}
                cancle={{ text: '取消', url: returnUrl }}
                redirect
              />
            </FormTable>
          )
        }}
      </Query>
    )
  }
}

const mapStateToProps = state => ({
  user: globalDuck.selectors.user(state),
})

const mapDispatchToProps = {}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(newDataset)
